import styles from './login.less';
import { LoginForm, ProFormText, ProFormCheckbox } from '@ant-design/pro-form';
import {
  UserOutlined,
  MobileOutlined,
  LockOutlined,
  AlipayCircleOutlined,
  TaobaoCircleOutlined,
  WeiboCircleOutlined,
} from '@ant-design/icons';
import { message, Tabs, Space, Button, Modal, PageHeader, Alert } from 'antd';
import type { CSSProperties } from 'react';
import { useState } from 'react';
import { history } from 'umi';

import './login.less';

type LoginType = 'register' | 'account';

const iconStyles: CSSProperties = {
  marginLeft: '16px',
  color: 'rgba(0, 0, 0, 0.2)',
  fontSize: '24px',
  verticalAlign: 'middle',
  cursor: 'pointer',
};


export default () => {
  const [loginType, setLoginType] = useState<LoginType>('account');
  const [isModalVisible, setIsModalVisible] = useState(false);

  const register = () => {
    setIsModalVisible(true);
  }
  return (
    <div style={{ backgroundColor: 'white' }}>
      <LoginForm
        logo="https://github.githubassets.com/images/modules/logos_page/Octocat.png"
        title="FL-Platform"
        subTitle="基于区块链的安全联邦学习平台"
        actions={
          <Space>
            其他登录方式
            <AlipayCircleOutlined style={iconStyles} />
            <TaobaoCircleOutlined style={iconStyles} />
            <WeiboCircleOutlined style={iconStyles} />
          </Space>
        }
        submitter={{
          render: (props, doms) => {
            console.log(props);
            return loginType === 'account' ? (
              <Button type="primary" size='large' block onClick={() => history.push('/task/list')}>
                登录
              </Button>
            ) : (
              <Button type="ghost" size='large' block onClick={() => register()}>
                注册
              </Button>
            )
          },
        }}
      >
        <Tabs activeKey={loginType} onChange={(activeKey) => setLoginType(activeKey as LoginType)}>
          <Tabs.TabPane key={'account'} tab={'登录'} />
          <Tabs.TabPane key={'register'} tab={'注册'} />
        </Tabs>

        {loginType === 'account' && (
          <>
            <ProFormText
              name="username"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined className={'prefixIcon'} />,
              }}
              placeholder={'用户名: admin or user'}
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
              ]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={'prefixIcon'} />,
              }}
              placeholder={'密码: ant.design'}
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
          </>
        )}
        {loginType === 'register' && (
          <>
            <ProFormText
              name="username"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined className={'prefixIcon'} />,
              }}
              placeholder={'用户名: admin or user'}
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
              ]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={'prefixIcon'} />,
              }}
              placeholder={'密码：'}
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={'prefixIcon'} />,
              }}
              placeholder={'确认密码: '}
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
          </>
        )}

        <div
          style={{
            marginBottom: 24,
          }}
        >
          <ProFormCheckbox noStyle name="autoLogin">
            自动登录
          </ProFormCheckbox>
          <a
            style={{
              float: 'right',
            }}
          >
            忘记密码
          </a>
        </div>
      </LoginForm>

      <Modal
        closable={false}
        visible={isModalVisible}
        footer={null}
        width={980}
      >
        <PageHeader
          onBack={() => setIsModalVisible(false)}
          title={'您的密钥'}
          subTitle="详情页"
          extra={[
            <Button key="2" onClick={() => setIsModalVisible(false)}>取消</Button>,
            <Button key="1" type="primary" onClick={() => history.push('/task/list')}>
              我已确认
            </Button>,
          ]}
        >
          <Alert
            style={{ marginBottom: 16 }}
            message="公钥(点击复制)"
            description="MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvhr9suAoM8ge2N3ZBrwb\nxFh47NYMASszZcpUACfmHkGBMXGUUqYiwzjzML0g/DHcsHBiSZMDTSEQOZuu52EW\na8lGFe2WPdSFUNgfAm0As
            lcgHjXcJhf9ox51P4JC1UEnz71rtNdcbzPdwUf7B2hI\nlA/tHhZ5nOvjfM7PLachorYVQ7MpdbeXpgrH5vYkxsUpa9BgfEWaByz1fEiHCN2r\nJiwI/Xk6scj7EkZHvKKwMOb4mb8FEp9+y0k6iMan3gJqds2NAf4nzedLH1ptGz2S\nKjIgkj
            yh0W0UJ01J0kr5u5k2ugH/F0G/QfiOey+lBygL3qWZX+HRcZsrH3mb2I0A\nowIDAQAB
            "
            type="info"
          />

          <Alert
            style={{ marginBottom: 16 }}
            message="私钥(点击复制)"
            description="MIIEowIBAAKCAQEAvhr9suAoM8ge2N3ZBrwbxFh47NYMASszZcpUACfmHkGBMXGU\nUqYiwzjzML0g/DHcsHBiSZMDTSEQOZuu52EWa8lGFe2WPdSFUNgfAm0AslcgHjXc\nJhf9ox51P4JC1UEn
            z71rtNdcbzPdwUf7B2hIlA/tHhZ5nOvjfM7PLachorYVQ7Mp\ndbeXpgrH5vYkxsUpa9BgfEWaByz1fEiHCN2rJiwI/Xk6scj7EkZHvKKwMOb4mb8F\nEp9+y0k6iMan3gJqds2NAf4nzedLH1ptGz2SKjIgkjyh0W0UJ01J0kr5u5k2ugH/\nF
            0G/QfiOey+lBygL3qWZX+HRcZsrH3mb2I0AowIDAQABAoIBAFCaqiILaBBYlDe4\njLoNzSoppxAoS4u9UPwiVw5/3FLMzGX19gE7HvcucPKj5lX4IE4RQKNYeahc0f/T\nEkxZvoNyIkzO4YqSzvnxwOgq5oY3ac9VX+Qo/OqKUgVdClBYYXR0
            KLRTMgaWc7pt\ndjL0VP2uaQf+WI8f92MmXvLI7/qIRSzJDWsHXmLCz/4Uaw9t6PhstkhJU6QcNtJ9\nNcD7VOj8/qbp0ZeA/lLphilA60ETjB7yVgSqEQX+EVDQwGN7apMrOxG7egmoKt2O\ns7tUYRMDZhcn52BObvuAcKXqCNSKFY3a6ncOd
            Q5l4lhR3eMZic9TeZUWZ5i27irn\nee2W030CgYEAznzfBC1ND8e8WkQ0/KCEmhGJMmLS+v2BIkuV8GgMjlEdktLI/qUN\nKejEZ3IqrNa9XfK/pwwbwK8lj6RSbYnktDUAiSeKVLblzHdscWo+onj2Fe63lc8X\nLN5lF76qQ2VKJxEFfyBVOp
            FiUbf6rmWThlWc/Y8fFB+lCPDObYJHA50CgYEA67B/\n2yf4gBnPUmYwyDo3b4Ym9zgK2Deq1KJ/hQ2VA5rPQYyAL286BkGYdLqrowYBcZ00\nai6EBZm7TWlUSjWRe9e3r26x3ZKhU7VjjKGPDqcg3Ofxa803aT7TCFEGTvlGP4//\nOCMsb34
            Wa/LP3Emc13KD1cEI3GJxX7h2fEf1gT8CgYBhtnu+uUU/U3CRcrd0WO2H\nDwdSnatjdLU4Knag1kwiyMXq5e6Rej+ZdnoCzebd9ZyVKbuB7FvxubBXohYTme5t\nTKudO+XdItPqBxV9Mh7DueQSCu47aU15QSCrtOFTlUoa5JYqS32pgoT5UM
            vC3XSL\nXFY3MxQs7LCnY3T8I2tBjQKBgHVDkKmafoJF1Sf7HiRRCsnbJkH0STkAoWdAHlA1\nzMFJYfsMC68OGQGJ22+gfMsUrt03SR/XWupqbY17bWuqsWK7lnGbkrVaQhgi9I/A\nxiuVLb2bTTvEk+AyWM8XeRsL3U68t0/X+EDUrBUzbwX
            8PiPXnw5YB6+W7y+f2JvH\nNbgDAoGBAKbO/zguu/+8slaIBA+jxlfdAVQywZC1f/1O+nxmAHM4+tsQJNDenwzh\n5FgMbxk/PW7ldIDf8S5q+XcoZrW9hKwZrSDeWOV11NXBWy5727uev0CpnPpAIdaA\nQUroU0R0xzdBoqwq1pPPRXK+5IH2
            VnZ8E/l938/o0KENfCyT1JiQ"
            type="warning"
          />

          <Alert
            message="注意!"
            showIcon
            description="请您妥善保管您的私钥，任何拥有您私钥的人可能导致数据隐私泄露"
            type="error"
          />

        </PageHeader>
      </Modal>
    </div>
  );
};